<template>
	<el-row align="middle" justify="center" type="flex">
		<el-col :span="10">
			<el-progress :show-text="false" :stroke-width="5"
						 :percentage="percentage" color="#2E70ED">
			</el-progress>
		</el-col>
		<el-col :span="4">
			<div align="center">{{ duration }}</div>
		</el-col>
		<el-col :span="6">
			<!-- 录音按钮 -->
			<el-button v-model="button" size="small" :type="button==='取消' ? 'danger' : 'primary'" @click="handle" plain>
				{{ button }}
			</el-button>
		</el-col>
		<el-col :span="4">
			<audio id="audio"></audio>
			<el-button size="small" @click="play" v-if="percentage>0" :disabled="button!=='取消'">试听</el-button>
		</el-col>
	</el-row>
</template>


<script>
import {Recorder} from "../utils/recorder";
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {upload} from "../api/broadcast";
import router from "../router";

export default {
	props: {},
	setup(props, context) {
		//设备状态
		let device = ref(false);
		//录音器对象
		let recorder;
		//录音设置
		let button = ref('开始录音');
		let seconds = 0;
		let duration = ref('0:00');
		let percentage = ref(0);
		//计时器
		let timer = null;
		//最大录音时间：单位s
		const MAX_TIME = 10;
		//音频在线地址
		const audioUrl = ref();
		
		
		//获取浏览器录音权限
		const getDevice = () => {
			navigator.mediaDevices.getUserMedia({audio: true})
				.then(stream => {
					recorder = new Recorder(stream);
					device.value = true;
					return true
				})
				.catch(err => {
					console.error("录音器初始化失败：", err);
					return false;
				});
			
		};
		
		//定义按钮处理操作
		const handle = () => {
			switch (button.value) {
				case '开始录音':
					recorder.load()
					start()
					break
				case '结束录音':
					end()
					break
				case '取消':
					location.reload()
					//router.replace('/refresh')
			}
		};
		
		getDevice();
		
		//定义录音操作
		function start() {
			if (!device.value) {
				ElMessage.error('未发现录音设备或无录音权限！');
				return;
			}
			recorder.start();
			//开始录音后按钮文字变化
			button.value = "结束录音";
			percentage.value = 0;
			duration.value = '0:00';
			seconds = 0;
			//时间每秒嘀嗒一次
			timer = window.setInterval(function () {
				seconds++;
				duration.value = parseInt(seconds / 60) + ":" +
					(seconds % 60 < 10 ? "0" + (seconds % 60) : seconds % 60);
				percentage.value = parseFloat((seconds * 100 / MAX_TIME).toFixed(2));
				//超时自动停止
				if (seconds >= MAX_TIME) {
					end();
				}
			}, 1000);
		}
		
		//定义录音结束操作
		const end = () => {
			//录音完成清除定时
			window.clearInterval(timer);
			recorder.stop();
			button.value = '取消';
			
			//确认上传
			confirm();
			
			//将音频文件下载到本地
			//Recorder.download(blob, 'my-audio-file');
		};
		
		//定义确认语音并传值操作
		const confirm = () => {
			const blob = recorder.getBlob();
			
			let file = new window.File([blob], 'file.wav', {type: 'audio/wav'});
			
			//传给父组件
			context.emit('blob', file);
		}
		
		//定义播放/暂停操作
		const play = () => {
			let audio = document.getElementById('audio');
			//初始化播放地址
			//if (audio.src === '')
				recorder.play(audio);
			//播放中则暂停
			if (!audio.paused) audio.pause();
			//重新播放
			else audio.play();
		}
		
		
		return {
			button,
			duration,
			percentage,
			getDevice,
			handle,
			play
		}
	}
}
</script>

<style scoped>

</style>